<template>
  <view class="padding" style="padding-bottom: 120rpx">
    <view class="flex align-center">
      <image :src="info.doctor_avatar" style="width: 110rpx; height: 110rpx; border-radius: 50%" mode="aspectFill"></image>
      <view class="col-333" style="padding-left: 20rpx">
        <view class="font32">
          {{ info.doctor_name }}
        </view>
        <view class="font26" style="margin-top: 21rpx">
          {{ info.doctor_title }}
          <text class="padding-left-xs">{{ info.department_name }}</text>
        </view>
      </view>
    </view>
    <view v-if="type == 1" class="bg-white col-333 radius14" style="padding: 0rpx 32rpx; margin-top: 34rpx">
      <view
        @tap="radio = index"
        v-if="index < 3"
        v-for="(item, index) in info.inquiry"
        :key="index"
        class="flex align-center"
        style="border-bottom: solid 1rpx #eeeeee; padding: 36rpx 0rpx"
      >
        <view class="flex-sub">{{ item.type_text }}￥{{ item.price }}/次</view>
        <radio :checked="radio == index" color="#0087FE" style="transform: scale(0.6)"></radio>
      </view>
    </view>
    <view v-if="type == 2" class="bg-white col-333 radius14" style="padding: 0rpx 32rpx; margin-top: 34rpx">
      <view
        @tap="radio = index"
        v-if="index > 2"
        v-for="(item, index) in info.inquiry"
        :key="index"
        class="flex align-center"
        style="border-bottom: solid 1rpx #eeeeee; padding: 36rpx 0rpx"
      >
        <view class="flex-sub">{{ item.type_text }}￥{{ item.price }}/次</view>
        <radio :checked="radio == index" color="#0087FE" style="transform: scale(0.6)"></radio>
      </view>
      <view class="font26 col-666" style="padding-bottom: 36rpx">
        温馨提示：这是一段温馨提示这是一段温馨提示这是一段温馨提示 这是一段温馨提示这是一段温馨提示这是一段温馨提示 这是一段温馨提示。
      </view>
    </view>
    <!-- 支付 -->
    <view class="bg-white radius14 flex align-center margin-top" style="padding: 29rpx 35rpx">
      <image src="https://wenzhen.jiangkukeji360.com/static/index/wxpay.png" style="width: 51rpx; height: 42rpx" mode=""></image>
      <view class="flex-sub padding-left-xs col-333">微信支付</view>
      <radio :checked="true" color="#0087FE" style="transform: scale(0.6)"></radio>
    </view>
    <!-- 温馨提示 -->
    <view class="col-666 font26" style="margin-top: 35rpx; line-height: 46rpx">
      <view class="">温馨提示：</view>
      这是一段温馨提示。这是一段温馨提示。这是一段温馨提示这是一段温馨提示。这是一段温馨提示。这是一段温馨提示这是一段温馨提示。
    </view>
    <!-- 底部栏 -->
    <view class="foot-box bg-white flex align-center" style="padding: 11rpx 28rpx">
      <view class="font26 col-666 flex-sub">
        实付
        <text style="color: #fc4b39" class="font36">￥{{ radio == -1 ? 0 : info.inquiry[radio].price }}</text>
      </view>
      <view @click="pay" class="btnbg font32" style="width: 212rpx; height: 76rpx">去支付</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      type: 1,
      radio: -1,
      info: {}
    };
  },
  onLoad(op) {
    op.id ? (this.id = op.id) : '';
    op.type ? (this.type = op.type) : '';
  },
  onShow() {
    this.getinfo();
  },
  methods: {
    getinfo() {
      this.util
        .request(
          'doctor/details',
          {
            doctor_id: this.id
          },
          'post'
        )
        .then((res) => {
          this.info = res;
        });
    },
    pay() {
      if (this.radio == -1) {
        this.util.showToast('请先选择服务');
        return false;
      }
      if (this.radio == 1 || this.radio == 2) {
        this.util.showToast('暂未开放');
        return false;
      }
      let _this = this;
      this.util
        .request(
          'order/create',
          {
            doctor_id: this.id,
            inquiry_id: this.info.inquiry[this.radio].id
          },
          'post'
        )
        .then((res) => {
          this.util.pay('wxpay', res.response, res.order_id, 2).then((gdx) => {
            this.util.showMsg('支付成功', 1500, _this.util.urlTo('chat?id=' + _this.id));
          });
        });
    }
  }
};
</script>

<style>
page {
  background-color: #f8f8f8;
}
</style>
